<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <!-- 包裹起来定大小居中 -->
        <div>
            <!-- 猫眼电影图标+地点下拉列表 -->
            <div class="cat">
                <a href="">
                    <img src="img/maoyan_logo.png" alt="">
                    <h1>猫眼电影</h1>
                </a>
                <ul>
                    <li>
                        <a href="">成都
                            <span>▼</span>
                        </a>
                        <div class="white">
                        </div>
                        <div class="city">
                            <div class="position-city">
                                <span>定位城市 ： <a href="">成都</a></span>
                            </div>
                            <div class="town">
                                <span>A</span>
                                <span>B</span>
                                <span>C</span>
                                <span>D</span>
                                <span>E</span>
                                <span>F</span>
                                <span>G</span>
                                <span>H</span>
                                <span>I</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 导航栏 -->
            <nav>
                <a href="./index.html">首页</a>
                <a href="./movie.html">电影</a>
                <a href="./cinema.html">影院</a>
                <a href="./list.html">榜单</a>
                <a href="./register.html">注册</a>
                <a href="./personal.html">个人中心</a>
                <a href="./seat.html">选座</a>
                <!-- <a href="">热点</a> -->
            </nav>

            <!-- APP下载 搜索框 用户头像 -->
            <div class="head-left">
                <!-- APP下载 -->
                <div class="app">
                    <a href="">
                        <img src="img/app_logo.png" alt="">
                        <p>APP下载</p>
                        <span>▼</span>
                    </a>
                    <div>
                    </div>
                </div>
                <!-- 搜索 -->
                <div class="search">
                    <input type="text" placeholder="找影视剧">
                    <input type="submit" value="">
                </div>
                <!-- 用户头像 -->
                <div class="user">
                    <a href="">
                        <img src="img/user_logo.png" alt="">
                        <span>▼</span>
                    </a>
                    <div>
                        <a href="">登陆</a>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- 占位 -->
    <div class="seat"></div>
    <!-- 内容顶部 -->
    <section class="banner">
        <!-- 轮播选项 -->
        <div class="poster">
            <span>
                <a href="">&#60</a>
            </span>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <span>
                <a href="">&#62</a>
            </span>
        </div>
    </section>
    <!-- 中间内容 分左右 -->
    <main>
        <!-- 左边内容 -->
        <section class="left">
            <!-- 左边上部分 正在热映 -->
            <div class="well-received">
                <div>
                    <h1>正在热映 (55部)</h1>
                    <a href="">全部 ></a>
                </div>
                <div class="tickets">
                    <a href="">
                        <div>
                            <span>
                                <p>送你一朵小红花</p>
                                <i>8.9</i>
                            </span>
                            <div>3Dmax</div>
                        </div>
                        <span>购票</span>
                    </a>
                    <a href="">
                        <div>
                            <span>
                                <p>送你一朵小红花</p>
                                <i>8.9</i>
                            </span>
                            <div>3Dmax</div>
                        </div>
                        <span>购票</span>
                    </a>
                    <a href="">
                        <div>
                            <span>
                                <p>送你一朵小红花</p>
                                <i>8.9</i>
                            </span>
                            <div>3Dmax</div>
                        </div>
                        <span>购票</span>
                    </a>
                    <a href="">
                        <div>
                            <span>
                                <p>送你一朵小红花</p>
                                <i>8.9</i>
                            </span>
                            <div>3Dmax</div>
                        </div>
                        <span>购票</span>
                    </a>
                    <a href="">
                        <div>
                            <span>
                                <p>送你一朵小红花</p>
                                <i>8.9</i>
                            </span>
                            <div>3Dmax</div>
                        </div>
                        <span>购票</span>
                    </a>
                    <a href="">
                        <div>
                            <span>
                                <p>送你一朵小红花</p>
                                <i>8.9</i>
                            </span>
                            <div>3Dmax</div>
                        </div>
                        <span>购票</span>
                    </a>
                    <a href="">
                        <div>
                            <span>
                                <p>送你一朵小红花</p>
                                <i>8.9</i>
                            </span>
                            <div>3Dmax</div>
                        </div>
                        <span>购票</span>
                    </a>
                    <a href="">
                        <div>
                            <span>
                                <p>送你一朵小红花</p>
                                <i>8.9</i>
                            </span>
                            <div>3Dmax</div>
                        </div>
                        <span>购票</span>
                    </a>
                </div>
            </div>
            <!-- 左边中间内容 即将上映 -->
            <div class="coming-soon">
                <div>
                    <h1>即将上映 (276部)</h1>
                    <a href="">全部 ></a>
                </div>
                <div class="pre-sale">
                    <div>
                        <div class="presale-top">
                            <a href="">
                                <div>
                                    <span>
                                        <p>送你一朵小红花</p>
                                    </span>
                                </div>
                            </a>
                            <p>134人想看</p>
                            <span>
                                <p>预告片</p>
                                <a href="">预售</a>
                            </span>
                        </div>
                        <div class="presale-bottom">
                            10月26日上映
                        </div>
                        <div>3D</div>
                    </div>
                    <div>
                        <div class="presale-top">
                            <a href="">
                                <div>
                                    <span>
                                        <p>送你一朵小红花</p>
                                    </span>
                                </div>
                            </a>
                            <p>134人想看</p>
                            <span>
                                <p>预告片</p>
                                <a href="">预售</a>
                            </span>
                        </div>
                        <div class="presale-bottom">
                            10月26日上映
                        </div>
                        <div>3D</div>
                    </div>
                    <div>
                        <div class="presale-top">
                            <a href="">
                                <div>
                                    <span>
                                        <p>送你一朵小红花</p>
                                    </span>
                                </div>
                            </a>
                            <p>134人想看</p>
                            <span>
                                <p>预告片</p>
                                <a href="">预售</a>
                            </span>
                        </div>
                        <div class="presale-bottom">
                            10月26日上映
                        </div>
                        <div>3D</div>
                    </div>
                    <div>
                        <div class="presale-top">
                            <a href="">
                                <div>
                                    <span>
                                        <p>送你一朵小红花</p>
                                    </span>
                                </div>
                            </a>
                            <p>134人想看</p>
                            <span>
                                <p>预告片</p>
                                <a href="">预售</a>
                            </span>
                        </div>
                        <div class="presale-bottom">
                            10月26日上映
                        </div>
                        <div>3D</div>
                    </div>
                    <div>
                        <div class="presale-top">
                            <a href="">
                                <div>
                                    <span>
                                        <p>送你一朵小红花</p>
                                    </span>
                                </div>
                            </a>
                            <p>134人想看</p>
                            <span>
                                <p>预告片</p>
                                <a href="">预售</a>
                            </span>
                        </div>
                        <div class="presale-bottom">
                            10月26日上映
                        </div>
                        <div>3D</div>
                    </div>
                    <div>
                        <div class="presale-top">
                            <a href="">
                                <div>
                                    <span>
                                        <p>送你一朵小红花</p>
                                    </span>
                                </div>
                            </a>
                            <p>134人想看</p>
                            <span>
                                <p>预告片</p>
                                <a href="">预售</a>
                            </span>
                        </div>
                        <div class="presale-bottom">
                            10月26日上映
                        </div>
                        <div>3D</div>
                    </div>
                    <div>
                        <div class="presale-top">
                            <a href="">
                                <div>
                                    <span>
                                        <p>送你一朵小红花</p>
                                    </span>
                                </div>
                            </a>
                            <p>134人想看</p>
                            <span>
                                <p>预告片</p>
                                <a href="">预售</a>
                            </span>
                        </div>
                        <div class="presale-bottom">
                            10月26日上映
                        </div>
                        <div>3D</div>
                    </div>
                    <div>
                        <div class="presale-top">
                            <a href="">
                                <div>
                                    <span>
                                        <p>送你一朵小红花</p>
                                    </span>
                                </div>
                            </a>
                            <p>134人想看</p>
                            <span>
                                <p>预告片</p>
                                <a href="">预售</a>
                            </span>
                        </div>
                        <div class="presale-bottom">
                            10月26日上映
                        </div>
                        <div>3D</div>
                    </div>
                </div>
            </div>
            <!-- 左边内容下部分 热播电影 -->
            <div class="hitmovies">
                <div>
                    <h1>热播电影
                        <nav>
                            <a href="">爱情</a>
                            <a href="">喜剧</a>
                            <a href="">动作</a>
                            <a href="">恐怖</a>
                            <a href="">动画</a>
                        </nav>
                    </h1>
                    <a href="">全部 ></a>
                </div>
                <div class="hit">
                    <a href="">
                        <span>
                            <p>送你一朵小红花</p>
                            <i>8.9</i>
                        </span>
                        <div>3D</div>
                    </a>
                    <a href="">
                        <span>
                            <p>送你一朵小红花</p>
                            <i>8.9</i>
                        </span>
                        <div>3D</div>
                    </a>
                    <a href="">
                        <span>
                            <p>送你一朵小红花</p>
                            <i>8.9</i>
                        </span>
                        <div>3D</div>
                    </a>
                    <a href="">
                        <span>
                            <p>送你一朵小红花</p>
                            <i>8.9</i>
                        </span>
                        <div>3D</div>
                    </a>
                    <a href="">
                        <span>
                            <p>送你一朵小红花</p>
                            <i>8.9</i>
                        </span>
                        <div>3D</div>
                    </a>
                    <a href="">
                        <span>
                            <p>送你一朵小红花</p>
                            <i>8.9</i>
                        </span>
                        <div>3D</div>
                    </a>
                    <a href="">
                        <span>
                            <p>送你一朵小红花</p>
                            <i>8.9</i>
                        </span>
                        <div>3D</div>
                    </a>
                </div>
            </div>
        </section>
        <!-- 右边内容 -->
        <section class="right">
            <!-- 今日票房 -->
            <div class="boxoffice">
                <h1>今日票房</h1>
                <nav>
                    <a href="">
                        <div>
                            <span>1</span>
                        </div>
                        <div>
                            <p>机械师2:复活</p>
                            <i>5203.28万</i>
                        </div>
                    </a>
                    <a href="">
                        <p>
                            <span>2</span>机械师2:复活</p>
                        <i>5203.28万</i>
                    </a>
                    <a href="">
                        <p>
                            <span>3</span>机械师2:复活</p>
                        <i>5203.28万</i>
                    </a>
                    <a href="">
                        <p>
                            <span>4</span>机械师2:复活</p>
                        <i>5203.28万</i>
                    </a>
                    <a href="">
                        <p>
                            <span>5</span>机械师2:复活</p>
                        <i>5203.28万</i>
                    </a>
                    <a href="">
                        <p>
                            <span>5</span>机械师2:复活</p>
                        <i>5203.28万</i>
                    </a>
                    <a href="">
                        <p>
                            <span>7</span>机械师2:复活</p>
                        <i>5203.28万</i>
                    </a>
                    <a href="">
                        <p>
                            <span>8</span>机械师2:复活</p>
                        <i>5203.28万</i>
                    </a>
                    <a href="">
                        <p>
                            <span>9</span>机械师2:复活</p>
                        <i>5203.28万</i>
                    </a>
                    <a href="">
                        <p>
                            <span>10</span>机械师2:复活</p>
                        <i>5203.28万</i>
                    </a>
                </nav>
            </div>
            <!-- 今日大盘 -->
            <div class="market">
                <div>今日大盘</div>
                <div>
                    <h1>1.03亿</h1>
                    <a href="">查看更多></a>
                    <span>北京时间 10:07</span>
                    <p>猫眼专业版实时数据</p>
                </div>
            </div>
            <!-- 最受期待 -->
            <div class="expect">
                <div class="expect-title">
                    <h1>最受期待</h1>
                    <a href="">查看完整榜单></a>
                </div>
                <div class="expect-nav">
                    <a href="">
                        <div>
                            <div class="number">1</div>
                        </div>
                        <div>
                            <h1>三生三世十里桃花</h1>
                            <span>上映时间 10:44</span>
                            <i>212184人想看</i>
                        </div>
                    </a>
                    <a href="">
                        <div>
                            <div class="number">2</div>
                        </div>
                        <div>
                            <h1>奇异博士</h1>
                            <i>212184人想看</i>
                        </div>
                    </a>
                    <a href="">
                        <div>
                            <div class="number">3</div>
                        </div>
                        <div>
                            <h1>奇异博士</h1>
                            <i>212184人想看</i>
                        </div>
                    </a>
                    <a href="">
                        <p>
                            <span>4</span>你的名字</p>
                        <i>53713人想看</i>
                    </a>
                    <a href="">
                        <p>
                            <span>5</span>你的名字</p>
                        <i>53713人想看</i>
                    </a>
                    <a href="">
                        <p>
                            <span>6</span>你的名字</p>
                        <i>53713人想看</i>
                    </a>
                    <a href="">
                        <p>
                            <span>7</span>你的名字</p>
                        <i>53713人想看</i>
                    </a>
                    <a href="">
                        <p>
                            <span>8</span>你的名字</p>
                        <i>53713人想看</i>
                    </a>
                    <a href="">
                        <p>
                            <span>9</span>你的名字</p>
                        <i>53713人想看</i>
                    </a>
                    <a href="">
                        <p>
                            <span>10</span>你的名字</p>
                        <i>53713人想看</i>
                    </a>
                </div>
                <!-- TOP前十 -->
                <div class="boxoffice topten">
                    <div class="expect-title">
                        <h1>TOP 前十</h1>
                        <a href="">查看完整榜单></a>
                    </div>
                    <nav>
                        <a href="">
                            <div>
                                <span>1</span>
                            </div>
                            <div>
                                <p>机械师2:复活</p>
                                <i>5203.28万</i>
                            </div>
                        </a>
                        <a href="">
                            <p>
                                <span>2</span>机械师2:复活</p>
                            <i>5203.28万</i>
                        </a>
                        <a href="">
                            <p>
                                <span>3</span>机械师2:复活</p>
                            <i>5203.28万</i>
                        </a>
                        <a href="">
                            <p>
                                <span>4</span>机械师2:复活</p>
                            <i>5203.28万</i>
                        </a>
                        <a href="">
                            <p>
                                <span>5</span>机械师2:复活</p>
                            <i>5203.28万</i>
                        </a>
                        <a href="">
                            <p>
                                <span>5</span>机械师2:复活</p>
                            <i>5203.28万</i>
                        </a>
                        <a href="">
                            <p>
                                <span>7</span>机械师2:复活</p>
                            <i>5203.28万</i>
                        </a>
                        <a href="">
                            <p>
                                <span>8</span>机械师2:复活</p>
                            <i>5203.28万</i>
                        </a>
                        <a href="">
                            <p>
                                <span>9</span>机械师2:复活</p>
                            <i>5203.28万</i>
                        </a>
                        <a href="">
                            <p>
                                <span>10</span>机械师2:复活</p>
                            <i>5203.28万</i>
                        </a>
                    </nav>
                </div>
            </div>
        </section>
    </main>
    <!-- 脚 -->
    <footer>
        <div>
            <p>◎2016猫眼电影 maoyan.com京ICP证160733号京ICP备16022489号-1京公网安备11010502030881号网络文化经营许可证电子公告服务规则</p>
            <p>北京猫眼文化传媒有限公司</p>
        </div>
    </footer>
</body>

</html>